<template>
  <div class="pageCart" :style="{width:imageSize.width+'px',height:imageSize.height+'px'}" @mousedown="onMouseDown">
    <div class="cart" ref="odiv" @dblclick="btnQuery" :style="{
        width:cartSize.width+'px',
        height:cartSize.height+'px',
        top:cartSize.top+'px',
        left:cartSize.left+'px',
      }">
      <div @mousedown.stop="btnLeftUp" class="leftUp"></div>
      <div @mousedown.stop="btnRightUp" class="rightUp"></div>
      <div @mousedown.stop="btnLeftDown" class="leftDown"></div>
      <div @mousedown.stop="btnRightDown" class="rightDown"></div>
      <div @mousedown.stop="btnTop" class="top"></div>
      <div @mousedown.stop="btnLeft" class="left"></div>
      <div @mousedown.stop="btnRight" class="right"></div>
      <div @mousedown.stop="btnBottom" class="bottom"></div>
      <div @mousedown.stop class="cartBtn query el-icon-check" @click="btnQuery"></div>
      <div @mousedown.stop class="cartBtn close el-icon-close" @click="closeCart"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "auImageCart",
  data(){
    return {

    }
  },
  props:{
    imageSize:{
      default:null,
      type:Object
    },
    imageBase64:{
      default: null,
      type:String
    },
    cartSize:{
      default: null,
      type:Object
    },
    scale:{
      type:Number,
      default:100
    }
  },
  methods:{
    btnLeftUp(e){
      //备份数据
      let obj={...this.cartSize};
      this.$au.MouseSliding(e,this.$refs.odiv,this.$parent.$refs.image,null,({left,top,width,height})=>{
        width=obj.width-width;
        height=obj.height-height;
        let imageSizeWidth=this.$parent.$refs.image.offsetWidth;
        let imageSizeHeight=this.$parent.$refs.image.offsetHeight;

        if(width>imageSizeWidth){
          width=imageSizeWidth;
        }
        if(height>imageSizeHeight){
          height=imageSizeHeight;
        }
        this.$emit("on-point",{
          x:left,y:top,
          width,
          height
        })
      },()=>{
        this.isKeyDown=false;
      })
    },
    btnRightUp(e){
      //备份数据
      let obj={...this.cartSize};
      this.$au.MouseSliding(e,this.$refs.odiv,this.$parent.$refs.image,null,({left,top,width,height})=>{
        width=obj.width+width;
        height=obj.height-height;
        let imageSizeWidth=this.$parent.$refs.image.offsetWidth;
        let imageSizeHeight=this.$parent.$refs.image.offsetHeight;

        if(width>imageSizeWidth){
          width=imageSizeWidth;
        }
        if(height>imageSizeHeight){
          height=imageSizeHeight;
        }
        this.$emit("on-point",{
          y:top,
          width,
          height
        })
      },()=>{
        this.isKeyDown=false;
      })
    },
    btnLeftDown(e){
      //备份数据
      let obj={...this.cartSize};
      this.$au.MouseSliding(e,this.$refs.odiv,this.$parent.$refs.image,null,({left,top,width,height})=>{
        width=obj.width-width;
        height=obj.height+height;
        let imageSizeWidth=this.$parent.$refs.image.offsetWidth;
        let imageSizeHeight=this.$parent.$refs.image.offsetHeight;

        if(width>imageSizeWidth){
          width=imageSizeWidth;
        }
        if(height>imageSizeHeight){
          height=imageSizeHeight;
        }
        this.$emit("on-point",{
          x:left,
          width,
          height
        })
      },()=>{
        this.isKeyDown=false;
      })
    },
    btnRightDown(e){
      //备份数据
      let obj={...this.cartSize};
      this.$au.MouseSliding(e,this.$refs.odiv,this.$parent.$refs.image,null,({left,top,width,height})=>{
        width=obj.width+width;
        height=obj.height+height;
        let imageSizeWidth=this.$parent.$refs.image.offsetWidth;
        let imageSizeHeight=this.$parent.$refs.image.offsetHeight;

        if(width>imageSizeWidth){
          width=imageSizeWidth;
        }
        if(height>imageSizeHeight){
          height=imageSizeHeight;
        }
        this.$emit("on-point",{
          width,
          height
        })
      },()=>{
        this.isKeyDown=false;
      })
    },
    btnTop(e){
      //备份数据
      let obj={...this.cartSize};
      this.$au.MouseSliding(e,this.$refs.odiv,this.$parent.$refs.image,null,({left,top,width,height})=>{
        width=obj.width;
        height=obj.height-height;
        let imageSizeWidth=this.$parent.$refs.image.offsetWidth;
        let imageSizeHeight=this.$parent.$refs.image.offsetHeight;
        if(width>imageSizeWidth){
          width=imageSizeWidth;
        }
        if(height>imageSizeHeight){
          height=imageSizeHeight;
        }
        this.$emit("on-point",{
          y:top,
          width,
          height
        })
      },()=>{
        this.isKeyDown=false;
      })
    },
    btnBottom(e){
      //备份数据
      let obj={...this.cartSize};
      this.$au.MouseSliding(e,this.$refs.odiv,this.$parent.$refs.image,null,({left,top,width,height})=>{
        height=obj.height+height;
        let imageSizeWidth=this.$parent.$refs.image.offsetWidth;
        let imageSizeHeight=this.$parent.$refs.image.offsetHeight;
        if(width>imageSizeWidth){
          width=imageSizeWidth;
        }
        if(height>imageSizeHeight){
          height=imageSizeHeight;
        }
        this.$emit("on-point",{
          height
        })
      },()=>{
        this.isKeyDown=false;
      })
    },
    btnLeft(e){
      //备份数据
      let obj={...this.cartSize};
      this.$au.MouseSliding(e,this.$refs.odiv,this.$parent.$refs.image,null,({left,top,width,height})=>{
        width=obj.width-width;
        height=obj.height;
        let imageSizeWidth=this.$parent.$refs.image.offsetWidth;
        let imageSizeHeight=this.$parent.$refs.image.offsetHeight;
        if(width>imageSizeWidth){
          width=imageSizeWidth;
        }
        if(height>imageSizeHeight){
          height=imageSizeHeight;
        }
        this.$emit("on-point",{
          x:left,
          width,
          height
        })
      },()=>{
        this.isKeyDown=false;
      })
    },
    btnRight(e){
      //备份数据
      let obj={...this.cartSize};
      this.$au.MouseSliding(e,this.$refs.odiv,this.$parent.$refs.image,null,({left,top,width,height})=>{
        width=obj.width+width;
        let imageSizeWidth=this.$parent.$refs.image.offsetWidth;
        let imageSizeHeight=this.$parent.$refs.image.offsetHeight;
        if(width>imageSizeWidth){
          width=imageSizeWidth;
        }
        if(height>imageSizeHeight){
          height=imageSizeHeight;
        }
        this.$emit("on-point",{
          width,
        })
      },()=>{
        this.isKeyDown=false;
      })
    },
    onMouseDown(e){
      this.isKeyDown=true;
      this.$au.MouseSliding(e,null,this.$parent.$refs.image,null,({left,top})=>{
        this.$emit("on-point",{x:left,y:top})
      },()=>{
        this.isKeyDown=false;
      })
    },
    closeCart(){
      this.$emit("close");
    },
    btnQuery(){
      let {left,top,width,height}=this.cartSize;

      left=left/this.scale*100;
      top=top/this.scale*100;
      width=width/this.scale*100;
      height=height/this.scale*100;

      left=parseInt(left);
      top=parseInt(top);
      width=parseInt(width);
      height=parseInt(height);

      this.$emit("on-query",{left,top,width,height});
    }
  }
}
</script>

<style scoped lang="scss">
@import "../../styles/auImage.scss";
.pageCart{
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
</style>
